<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>应用监控</title>
<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" />
</head>
<style>
.layui-col-md6 {
	padding: 5px;
}

.layui-card-header {
	color: #444 !important;
}
</style>
<body style="background-color: #F2F2F2">
	<div style="padding: 20px;">

		<div class="layui-col-md12" style="margin-bottom: 10px">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;堆内存监控 
					<span style="float: right;">
						<button id="heap_button" class="layui-btn layui-btn-xs layui-btn-normal">快照</button>
					</span>
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">Eden Space</div>
				<div class="layui-card-body" id="eden" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">Survivor Space0</div>
				<div class="layui-card-body" id="s0" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">Survivor Space1</div>
				<div class="layui-card-body" id="s1" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">老年代</div>
				<div class="layui-card-body" id="old" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md12" style="margin: 10px 0 10px 0">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;方法区监控
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">元空间</div>
				<div class="layui-card-body" id="mc" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">类指针压缩空间</div>
				<div class="layui-card-body" id="ccsc" style="height: 330px">
				</div>
			</div>
		</div>

		<div class="layui-col-md12" style="margin: 10px 0 10px 0">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;GC监控
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">GC次数</div>
				<div class="layui-card-body" id="gcn" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">GC耗时</div>
				<div class="layui-card-body" id="gct" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md12" style="margin: 10px 0 10px 0">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;类加载监控
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">类加载数量</div>
				<div class="layui-card-body" id="classn" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">类加载耗时</div>
				<div class="layui-card-body" id="classt" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md12" style="margin: 10px 0 10px 0">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;类编译监控
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">类编译数量</div>
				<div class="layui-card-body" id="comn" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">类编译耗时</div>
				<div class="layui-card-body" id="comt" style="height: 330px"></div>
			</div>
		</div>

		<div class="layui-col-md12" style="margin: 10px 0 10px 0">
			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe857;</i>&nbsp;线程监控
					<span style="float: right;">
						<button id="thread_button" class="layui-btn layui-btn-xs layui-btn-normal">快照</button>
					</span>
				</div>
			</div>
		</div>

		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">总数/运行/等待/休眠</div>
				<div class="layui-card-body" id="thread" style="height: 330px"></div>
			</div>
		</div>

	</div>
	
	<script type="text/javascript" th:src="@{/lib/jquery.min.js}"></script>
	<script src="/lib/sockjs.min.js"></script>
	<script src="/lib/stomp.min.js"></script>
	<script type="text/javascript" th:src="@{/lib/layui/layui.all.js}"></script>
	<script type="text/javascript" th:src="@{/lib/echarts/echarts.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/common.js}"></script>
	<script type="text/javascript" th:src="@{/js/eden.js}"></script>
	<script type="text/javascript" th:src="@{/js/socket.js}"></script>
	
</body>
<script type="text/javascript">
	//下载快照
	$("#heap_button").click(function() {
		layer.alert('啥都没有，惊喜不惊喜，意外不意外', {
			icon : 1
		});
	})

	$("#thread_button").click(function() {
		layer.alert('啥都没有，惊喜不惊喜，意外不意外', {
			icon : 1
		});
	})
</script>
</html>